<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疫情监控</title>
    <link rel="stylesheet" href="../static/css/main.css">
    <link rel="stylesheet" href="../static/css/popbox.css">
    <script src="../static/js/config/jquery-3.3.1.min.js"></script>
    <script src="../static/js/config/echarts.min.js"></script>
    <script src="../static/js/config/echarts-wordcloud.min.js"></script>
    <script src="../static/js/config/macarons.js"></script>
    <script src="../static/js/config/flexible.js"></script>
    <script src="../static/js/config/echarts-gl.min.js"></script>
</head>

<body>
    <div class="loading">
        <div class="loadbox"> <img src="../static/images/loading.gif"> 页面加载中... </div>
    </div>
    <header>
        <h1>疫情大数据可视化平台</h1>
        <!-- 我是时间 -->
        <div id="tim"></div>
    </header>

    <!-- 弹框部分 -->
    <div id="popLayer"></div>
    <div id="popBox">
        <div class="close">

            <a href="javascript:void(0)" onclick="closeBox()">
                <img src="../static/images/close1.png" id="closePng" />
            </a>

        </div>

        <h1>全国疫情详情</h1>

        <!-- 单选框 -->
        <label for="confirm-now" class="radio">
            <span class="radio-bg"></span>
            <input type="radio" name="confirmdata" id="confirm-now" value="1" checked="checked" /> 现有确诊
            <span class="radio-on"></span>
        </label>
        <label for="confirm-add" class="radio">
            <span class="radio-bg"></span>
            <input type="radio" name="confirmdata" id="confirm-add" value="2" /> 新增确诊
            <span class="radio-on"></span>
        </label>


        <div id="box">
            <span id="box-title"></span>
        </div>


        <!-- echarts地图 -->
        <div id="detailsQp"></div>
        <div id="detailsMap"></div>
        <div id="detailsBar"></div>


        <!-- 高德地图 -->
        <div id="gd">
            <a href="javascript:void(0)" onclick="closeGd()">关闭</a>
            <section>
                <div class="background-img">
                    <div class="box2">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <div class="content">
                            <iframe id="gdframe" src="../static/gaode.html" frameborder="0"
                                style="width: 100%; height: 100%;"></iframe>
                        </div>

                    </div>
                </div>
            </section>
        </div>



    </div>

    <!-- 页面主体部分 -->
    <section class="mainbox">

        <!-- 左边部分 -->
        <div class="column">
            <!-- 我是左1 -->
            <div class="panel">
                <div id="l1"></div>
                <div class="panel-footer"></div>
            </div>
            <!-- 我是左2 -->
            <div class="panel">
                <div id="l2">
                    <div class="title">中高风险地区</div>
                    <div class="ts"></div>
                    <div id="risk_wrapper">
                        <div id="risk_wrapper_li1">
                            <ul></ul>
                        </div>
                        <div id="risk_wrapper_li2"></div>
                    </div>
                </div>
                <div class="panel-footer"></div>
            </div>
            <!-- 我是左3 -->
            <div class="panel">
                <div id="l3"></div>
                <div class="panel-footer"></div>
            </div>

        </div>

        <!-- 中间部分 -->
        <div class="column">

            <div class="no">
                <!-- 我是中1 -->
                <div id="c1">
                    <!-- 大屏的数字 -->
                    <div class="no-hd">
                        <ul>
                            <li id="confirm">0</li>
                            <li id="confirmNow">0</li>
                            <li id="heal">0</li>
                            <li id="dead">0</li>
                        </ul>
                    </div>
                    <!-- 数字下的文字 -->
                    <div class="no-bd">
                        <ul>
                            <li>累计确诊</li>
                            <li>剩余确诊</li>
                            <li>累计治愈</li>
                            <li>累计死亡</li>
                        </ul>
                    </div>
                </div>
            </div>


            <div class="map" id="map">
                <!-- 球型背景图map1 -->
                <div class="map1"></div>
                <!-- 球型外框map2 -->
                <div class="map2"></div>
                <!-- 球型外框map3 -->
                <div class="map3"></div>
                <div class="map4"></div>
                <div class="map5"></div>
                <div class="map6"></div>
                <div class="cicle8">
                    <!-- <span>89%</span>
                    <p>同比</p> -->
                </div>
                <div class="cicle9">
                    <!-- <span>89%</span>
                    <p>完成率</p> -->
                </div>
                <div class="cicle10">
                    <!-- <span>89%</span>
                    <p>售罄率</p> -->
                </div>
                <div class="cicle11">
                    <!-- <span>89%</span>
                    <p>折扣率</p> -->
                </div>
                <!-- 我是中2 -->
                <div id="c2"></div>

                <div class="box" id="box">
                    <p><img src="../static/images/fd.png" id="ctr" /></p>
                    <p id="info" style="display:none;"></p>
                </div>


            </div>


        </div>

        <!-- 右边部分 -->
        <div class="column">

            <div class="panel">
                <!-- 我是右1 -->
                <div id="r1"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel">
                <!-- 我是右2 -->
                <div id="r2"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel">

                <!-- 我是右3 -->
                <div id="r3">
                    <div class="panel-footer"></div>
                    <div class="title">海外疫情</div>
                    <div class="ts"></div>
                    <div class="echart wenzi">
                        <div class="gun">
                            <span>地区</span>
                            <span>新增确诊</span>
                            <span>累计确诊</span>
                        </div>
                        <div id="FontScroll" class="myscroll">
                            <ul>
                            </ul>
                        
                        </div>
                    </div>
                </div>
            </div>

        </div>

        </div>


    </section>


    <!-- 底部模块 -->
    <div class="bottom">
        <!-- <h5><span>数据状况</span></h5> -->
        <p>Data Status</p>
    </div>

</body>
<script src="../static/js/config/fontscroll.js"></script>
<script src="../static/js/utils.js"></script>
<script src="../static/js/module/ec_3d_center_map.js"></script>
<script src="../static/js/module/ec_left1.js"></script>
<script src="../static/js/module/ec_left2.js"></script>
<script src="../static/js/module/ec_left3.js"></script>
<script src="../static/js/module/ec_right1.js"></script>
<script src="../static/js/module/ec_right2.js"></script>
<script src="../static/js/module/ec_center.js"></script>
<script src="../static/js/module/ec_center_bar.js"></script>
<script src="../static/js/module/ec_center_qp.js"></script>
<script src="../static/js/controller.js"></script>

<script>
    setTimeout(function(){$(".loading").fadeOut()},5000)
    $(window).on('load', function () {
	// $(".loading").fadeOut()

    $(function () {
        $('.myscroll').myScroll({
            speed: 60, //数值越大，速度越慢
            rowHeight: 38 //li的高度
        });
    })
})  
</script>

</html>